<template>
	<view class="page">
	  <view class="addStock">
	    <view class="title">
	      添加可转债持仓
	    </view>
	  	<view class="item">
	  	  代码 <input class="input" @change='toCheckBondBond' type="text" maxlength="6" v-model="stock.code" />
	  	</view>
	    <view class="item">
	      名字 <input class="input" maxlength="4" disabled type="text" v-model="stock.name" />
	    </view>
	    <view class="item">
	      单价 <input class="input" type="text" v-model="stock.purchase_price" />
	    </view>
	    <view class="item">
	      数量 <input class="input" type="number" v-model="stock.hold_quantity" />
	    </view>
	    <view class="addBtn">
	      <button type="primary" @click="toAddStock" :disabled="!allReady">添加持仓</button>
	    </view>
	  </view>
    <view class="tip">
      <view class="">
        *提示:
      </view>
      <view class="tips">
        为了确保一键换仓的准确性，请正确填写以上数据
      </view>
    </view>
  </view>
</template>

<script>
  
  import { checkBond, addStock } from './_api.js'
  
  import { createNamespacedHelpers } from 'vuex'
  const { mapActions } = createNamespacedHelpers('stock')
	export default {
		data() {
			return {
				stock: {
          code: null,
          name: null,
          purchase_price: null,
          hold_quantity: 1
        },
        
        isBond: false
			};
		},
    
    computed: {
      allReady () {
        if (this.isBond && Number(this.stock.hold_quantity) && Number(this.stock.purchase_price)) {
          return true
        } else {
          return false
        }
      }
    },
    
    methods: {
      ...mapActions(['getProfileDataReq', 'getStockListReq']),
      toCheckBondBond() {
        if (this.stock.code.length < 6) {
          return uni.showToast({
                  title:'请输入正确的可转债代码',
                  icon: 'none'
                  })
        }
        const data = {
          code: this.stock.code
        }
        checkBond(data)
          .then(res => {
            if (res.data.status) {
              this.isBond = true
              this.stock.name = res.data.name
            } else {
              uni.showToast({
                title:'请输入正确的可转债代码',
                icon: 'none'
              })
              this.isBond = false
            }
          })
          .catch(_ => {})
      },
      
      toAddStock () {
        if (this.allReady) {
          addStock(this.stock)
            .then(res => {
              uni.showToast({
                title:'添加成功',
                icon: 'none'
              })
              this.getProfileDataReq()
              this.getStockListReq()
            })
            .catch(_ => {})
        } else {
          uni.showToast({
            title:'请输入正确的可转债信息',
            icon: 'none'
          })
        }
      }
    }
	}
</script>

<style lang="scss" scoped>
  .addStock {
    width: 690rpx;
    margin: 80rpx auto;
    box-shadow: 0 0 10rpx #333;
    border-radius: 10rpx;
    overflow: hidden;
    .title {
      text-align: center;
      font-size: 50rpx;
      margin: 30rpx;
    }
    .input {
      display: inline-block;
      width: 320rpx;
      margin-left: 20rpx;
      border-bottom: 2rpx solid #555C60;
    }
    .item {
      width: 575rpx;
      margin: 15rpx auto;
      padding: 10rpx 30rpx 30rpx 10rpx;
      border-bottom: 2rpx solid #f5f5f5;
      text-align: center;
    }
    .addBtn {
      width: 650rpx;
      margin: 50rpx auto;
    }
  }
  .tip {
    width: 630rpx;
    margin: 30rpx auto;
    padding: 30rpx;
    font-size: 30rpx;
    box-shadow: 0 0 10rpx #333;
    border-radius: 10rpx;
    .tips {
      text-indent: 60rpx;
    }
  }
</style>
